<template>
  <div class="item">
    <template v-if="!range&&!percent">
      <div class="inlineBlock">{{ label }}</div>
      <div :style="{width: width}" class="inlineBlock">
        <slot name="item" />
      </div>
    </template>
    <template v-else>
      <div class="inlineBlock">{{ label }}</div>
      <div :style="{width: width}" class="inlineBlock">
        <slot name="low" />
      </div>
      <div class="inlineBlock line" />
      <div :style="{width: width}" class="inlineBlock">
        <slot name="high" />
      </div>
      <div v-if="percent" class="inlineBlock">%</div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    range: {
      type: Boolean,
      default: false
    },
    percent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      width: ''
    }
  },
  created() {
    this.width = 'calc(100% - ' + this.label.length + 'em)'
    if (this.range) this.width = 'calc(50% - ' + (this.label.length + 1) / 2 + 'em)'
    if (this.percent) this.width = 'calc(50% - ' + (this.label.length + 2) / 2 + 'em)'
  }
}
</script>

<style scoped lang="scss">
  .item{
    .inlineBlock{
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      .el-select,.el-cascader,.el-date-editor{
        width: 100%;
      }
      &.line{
        position: relative;
        width: 1em;
        height: 10px;
        &:after{
          position: absolute;
          content: "";
          display: inline-block;
          left: 20%;
          width: 60%;
          height: 1px;
          background: #999;
          top: 50%;
          margin-top:-0.5px
        }
      }
    }
  }
</style>
